
var IMGSeletc = IMGSeletc || {};
IMGSeletc.sourceData = [];//数据源
IMGSeletc.data = [];//已选择的图片
IMGSeletc.typeId = "";//当前选择的图片分组id
IMGSeletc.url = "";//
IMGSeletc.multiple = true;
IMGSeletc.imgArray = [];//待上传图片的数组
IMGSeletc.currpage = 1;//当前页码

//图片选择模板
IMGSeletc.template = '<div class="photo-popup-backdrop" style="display:none;"><div class="photo-popup">'+
    		   '<div class="photo-modal-header"><a class="close photo-close" data-dismiss="modal">×</a>'+
    		   '<span class="photo-popup_title">我的图片</span><div class="search-region">'+
    		   '<div class="photo-search-box"><input class="txt" type="text" placeholder="搜索" value="">'+
    		   '</div></div></div><div class="photo-modal-body"><div class="category-list-region">'+
    		   '<ul class="category-list" id="photo-category"><li class="photo-category-li" id="{{id}}">{{name}}<span>{{fcount}}</span></li></ul></div>'+
    		   '<div class="attachment-list-region"><ul class="image-list" id="photo-list"><li class="image-item">'+
               '<div class="image-box photo-image-box" id="{{id}}"><img id="photo-img-src" src="{{url}}">'+
    		   '<i class="fa fa-check" aria-hidden="true"></i></div><div class="image-meta">200*200</div>'+
               '<div class="image-title">{{name}}</div></li></ul><div class="attachment-pagination">'+
               '<div class="photo-pagination"  id="photo-paging"><span>共1条， 每页15条</span></div>'+
               '<button class="btn btn-success" id="photo-upload">上传图片</button></div></div></div>'+
               '<div class="photo-modal-footer"><button class="btn btn-default" id="photo-ok">确认</button>'+
               '</div></div></div>'; 

IMGSeletc.uploadTemplate = '<div class="upload-photo" id="photo-upload-view" style="display: none;"><div class="upload-photo_box">'+
							'<div class="box_top"><span class="upload_title">上传图片</span> '+
							'<a class="upload_close" id="photo-upload-close">×</a></div>'+
							'<div class="local-image-region"><div class="title">本地图片：</div>'+
							'<div class="content"><ul class="upload-local-image-list" id="photo-imgUl">'+
							'</ul><div id="addImgBtn" class="js-add-local-attachment add-local-image-button pull-left">'+
							'+<input type="file" value="添加 +" id="photo-local-file" class="js-local-file" multiple="" accept="image/gif, image/jpeg, image/png">'+
							'</div><div class="c-gray">仅支持jpg、gif、png三种格式, 大小不超过1 MB</div>'+
							'</div></div><div class="modal-footer clearfix">'+
							'<div class="text-center"><button id="photo-upload-ok" class="btn btn-default" data-loading-text="正在上传...">确认</button>'+
							'</div></div></div></div>';

//显示图片选择
IMGSeletc.show = function(config){
	if(config.multiple != undefined)
		IMGSeletc.multiple = config.multiple;
	
	//获取URL
	var protocol = window.location.protocol;
	var host = window.location.host;
	IMGSeletc.url = protocol + '//' + host + '/cunfang/';
	
	IMGSeletc.data = [];
	$("body").append(IMGSeletc.template);
	$('#photo-img-src').attr('src', IMGSeletc.url+'{{url}}');
   
	//图片分组
	IMGSeletc.getImgType();
	
	$('.photo-popup-backdrop').show();
	
	//关闭
	$('.photo-close').click(function(){
		IMGSeletc.hide();
	});
	
	//确定
	$('#photo-ok').click(function(){
		IMGSeletc.hide();
		if(config.callback)
			config.callback(IMGSeletc.data);
	});
	
	//上传图片
	$('#photo-upload').click(function(){
		console.log('jf s');
		$("body").append(IMGSeletc.uploadTemplate);
		$("#photo-upload-view").show();
		$("#photo-upload-close").click(function(){
			$("#photo-upload-view").hide();
			$("#photo-upload-view").remove();
			
		});
		//上传图片
		$("#photo-local-file").change(function(){
			if($("#photo-local-file").val().length == 0){
				return;
			}
			var $file =$("#photo-local-file").prop("files");
			for(var i = 0,len = $file.length; i < len; i ++){
				IMGSeletc.uploadFile($file[i]);
			}
		});
		$('#photo-upload-ok').click(function(){
			IMGSeletc.confirmUpload();
		});
	});
};

//确定保存图片
IMGSeletc.confirmUpload = function (){
	if(IMGSeletc.imgArray.length == 0){
		return ;
	}
	ZD.ux.Ajax({
		data:{data:IMGSeletc.imgArray, method:'cunfang.file.image.add', imgtype_id:IMGSeletc.typeId},
		success:function(res){
			if(res.status == 0){
				$("#photo-upload-view").hide();
				$("#photo-upload-view").remove();
				IMGSeletc.imgArray = [];
				$("#photo-imgUl").html("");
				IMGSeletc.getImgs(IMGSeletc.currpage,IMGSeletc.typeId);
				IMGSeletc.getImgType();
				ZD.msg.auto("保存成功");
			}
		}
	});
};

IMGSeletc.getImgType = function(){
	ZD.ux.repeat({
		name:'photo-category',
		data:{ method : 'cunfang.file.imgtype.getList'},
		callback:function(res){
			IMGSeletc.photoTypeSeleted();
			IMGSeletc.getImgs(1, IMGSeletc.typeId);
			$('.photo-category-li').click(function(){
				IMGSeletc.typeId = $(this).attr("id");
				IMGSeletc.getImgs(1, IMGSeletc.typeId);
				IMGSeletc.photoTypeSeleted();
			});
		}
	});
};

//上传文件
IMGSeletc.uploadFile = function (file){
	//判断文件类型
	var filename = file.name;
	var ldot = filename.lastIndexOf(".");  
    var type = filename.substring(ldot + 1);
	if(type != "jpg" && type != "JPG" && type != "png" && type != "PNG" && type != "gif" && type != "GIF"){
		ZD.msg.auto("只能上传jpg、png和gif格式的图片");
		return;
	}
	if(file.size/1024 > 2048){
		ZD.msg.auto("图片大小不能大于2M.");
		return;
	}
	
	ZD.ux.Upload({
		url:IMGSeletc.url+"File/upload",
		file:file,
		callback:function(res){
			if(res.status == 0){
				var url = res.data.path;
				var fileData = {
						name:filename//文件名
						,url:url//路径
						,suffix:type//后缀
				};
				IMGSeletc.imgArray.push(fileData);
				if(IMGSeletc.imgArray.length==10){
					$("#addImgBtn").hide();
				}
				var index = IMGSeletc.imgArray.length;
				$("#photo-imgUl").append(''
						+'<li class="upload-local-image-item">'
						+'<div class="image-box">'
						+'<img src="'+IMGSeletc.url+url+'">'
								+'</div> <a href="javascript:;" class="close-modal photo-delete-sel" id="'+url+'">×</a>'
								+'</li>'
						+'');
				$('.photo-delete-sel').click(function(){
					var id = $(this).attr("id");
					var i = 0;
					$.each(IMGSeletc.imgArray, function(index, value){
						if(value.url == id){
							i = index;
						}
					});
					$(this).parent().remove();
					IMGSeletc.imgArray.splice(i,1); 
					
				});
            }else{
            	ZD.msg.alert(res.data.msg);
            }
		}
	});
}

//隐藏图片选择
IMGSeletc.hide = function(){
	$('.photo-popup-backdrop').hide();
	$('.photo-popup-backdrop').remove();
	data = [];
};

//图片分组选中的样式
IMGSeletc.photoTypeSeleted = function(){
	var lis = $("#photo-category").find("li");
	lis.each(function(index,ele){
		if(ele.id == IMGSeletc.typeId){
			$(this).addClass("active");
		}else{
			$(this).removeClass("active");
		}
	});
};

//加载图片
IMGSeletc.getImgs = function(currpage,id){
	ZD.ux.repeat({
		name:'photo-list',
		data:{ method : 'cunfang.file.image.getList', currpage : currpage, count : 18, imgtype_id:id},
		callback:function(res){
			IMGSeletc.CreatePaging(res.data.currpage,res.data.totalpage,res.data.count,res.data.totalresult);

			if(res.data.data){
				IMGSeletc.sourceData = res.data.data;
			}else{
				IMGSeletc.sourceData = res.data;
			}
			//选择、取消选择图片
			$('.photo-image-box').click(function(){
				var t = $(this);
				if(IMGSeletc.multiple){
					if($(this).hasClass('active')){
						$(this).removeClass('active');
						var i = 0;
						$.each(IMGSeletc.data, function(index, value){
							if(value.id == t.attr("id")){
								i = index;
							}
						});
						IMGSeletc.data.splice(i,1);
					}else{
						$(this).addClass('active');
						$.each(IMGSeletc.sourceData, function(index, value){
							if(value.id == t.attr("id")){
								IMGSeletc.data.push(value);
							}
						});
					}
				}else{
					$('.photo-image-box').each(function(){
						$(this).removeClass('active');
					});
					IMGSeletc.data = [];
					$(this).addClass('active');
					$.each(IMGSeletc.sourceData, function(index, value){
						if(value.id == t.attr("id")){
							IMGSeletc.data.push(value);
						}
					});
				}
			});
		}
	});
};

/*创建分页*/
IMGSeletc.CreatePaging = function (fcurrPage,ftotalPage,fcount,ftotalCount){
	/*移除分页*/
	$("#photo-paging").html("");
	var currpage = 1;
	/*分页...*/
	var fcurrPage = parseInt(fcurrPage);
	var ftotalPage = parseInt(ftotalPage);
	fcurrPage = fcurrPage==0?1:fcurrPage;
	/*分页栏*/
	var fpaging = '<form class="form-inline text-right zd_form_page_0" style="width:630px;" role="formpage"> 每页'+fcount+'条,共'+ftotalCount+'条,'+ftotalPage+'页 <div class="form-group"><nav><ul class="pagination" style="margin:0">';
	fpaging += '<li><a href="javascript:void(0);" data-key="'+(fcurrPage-1)+'">&laquo;</a></li>';
	var fstart = 1;
	if(fcurrPage > 3){
		fstart = fcurrPage - 3;
	}
	var fend = ftotalPage + 1;
	if((fend - fstart) > 3){
		fend = fstart + 7;
	}
	if(fend > ftotalPage){
		fend = ftotalPage + 1;
	}
	for(var i = fstart;i < fend;i++){
		if(i == fcurrPage){
			fpaging += '<li class="active"><a href="javascript:void(0);" data-key="'+i+'">'+i+'</a></li>';
		}else{
			fpaging += '<li><a href="javascript:void(0);" data-key="'+i+'">'+i+'</a></li>';
		}
	}
	fpaging += '<li><a href="javascript:void(0);" data-key="'+(fcurrPage+1)+'">&raquo;</a></li>';
	fpaging += '</ul></nav>';
	fpaging += '</div><div class="form-group"><div class="input-group">'+
	'<input type="text" class="form-control" placeholder="页码" style="width:60px;"><span class="input-group-btn">'+
	'<button class="btn btn-small btn-primary" type="button" data-pager="goto">跳转</button>'+
	'</span></div></div></form>';
	
	/*分级...*/
	//fpaging = '<div class="row"><div class="col-md-4"><div id="" style="margin:20px;margin-left:0;"></div></div><div class="col-md-8">'+fpaging+'</div></div>';
	
	/*追加页码*/
	//_obj.parent().parent().append(fpaging);
	$("#photo-paging").append(fpaging);
	
	/*监听单击事件*/
	$("nav a").click(function(){
		var ftol = parseInt(ftotalPage);
		var fnext = $(this).attr("data-key");
		if(fnext<=0 || fnext > ftol || fnext == fcurrPage){
			return;
		}
		currpage = fnext;
		IMGSeletc.getImgs(currpage,IMGSeletc.typeId);
	});
	
	/*页面跳转*/
	$(".zd_form_page_0 button").click(function(){
		var fval = $(this).parent().prev().val();
		if(fval.length ==0 || isNaN(fval)){
			return;
		}
		fval = parseInt(fval);
		if(fval < 1 || fval > ftotalPage){
			return;
		}
		currpage = fval;
		IMGSeletc.getImgs(currpage,IMGSeletc.typeId);
	});
};




